<template>
	<div class="table-container">
		<!-- <div class="select-info" v-if="showSelectInfo && selectNum > 0">
			<div class="text-info">
				<i class="el-icon-warning"></i>
				<div class="">已选择 <span>{{selectNum}}</span> 项</div>
			</div>
			<div class="clear-btn" @click="clearSelect">
				清空
			</div>
		</div> -->
		<el-table ref="multipleTable" :data="tableData" @select="selectItem" @select-all="selectAll" :border='isBorder'
		 v-loading='loading' :defaultSelections='defaultSelections' style="width: 100%" :span-method="objectSpanMethod"
		 :show-summary="showSummary">
			<el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
			<el-table-column v-if="isIndex" type="index" :index="getIndex" :label="indexLabel" align="center" width="50"></el-table-column>
			<el-table-column v-for="item in tableCols" :key="item.id" :prop="item.prop" :label="item.label" :width="item.width"
			 :align="item.align" :render-header="item.require?renderHeader:null" :class="{'image-cell':item.type == 'image'}">
				<template slot-scope="scope">
					<!-- 按钮-->
					<template v-if="item.type === 'Button'">
						<el-button v-for="(btnItem,index) in item.btnList" v-if="!btnItem.refProp || scope.row[btnItem.refProp] == btnItem.refValue"
						 :key="'tableBtn'+index" :disabled="btnItem.disabled && btnItem.disabled(scope.row,scope.$index)" :type="btnItem.type" :size="size || btnItem.size"
						 :icon="btnItem.icon" @click="btnItem.handle(that,scope.row,scope.$index)">
							{{(btnItem.formatter && btnItem.formatter(scope.row)) || btnItem.label}}
						</el-button>
					</template>
					<!-- html -->
					<template v-if="item.type==='html'">
						<el-tooltip v-if="!item.noTips" placement="top" popper-class="table-tip">
							<div slot="content" v-html=" item.html?item.html(scope.row):scope.row[item.prop]"></div>
							<div v-html=" item.html?item.html(scope.row):scope.row[item.prop]"></div>
						</el-tooltip>
						<div v-else v-html=" item.html?item.html(scope.row):scope.row[item.prop]"></div>
					</template>
					<!-- 下拉框 -->
					<el-select v-if="item.type==='select'" v-model="scope.row[item.prop]" :size="size || btn.size" :props="item.props"
					 :disabled="item.isDisabled && item.isDisabled(scope.row)" @change='item.change && item.change(that,scope.row)'>
						<el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
					</el-select>
					<!-- 单选 -->
					<el-radio-group v-if="item.type==='radio'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)"
					 :size="size || btn.size" @change='item.change && item.change(that,scope.row)'>
						<el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ra.label}}</el-radio>
					</el-radio-group>
					<!-- 复选框 -->
					<el-checkbox-group v-if="item.type==='checkbox'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)"
					 :size="size || btn.size" @change='item.change && item.change(that,scope.row)'>
						<el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key='ra.value'>{{ra.label}}</el-checkbox>
					</el-checkbox-group>
					<!-- 评价 -->
					<el-rate v-if="item.type==='rate'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)"
					 :size="size || btn.size" @change='item.change && item.change(scope.row)'></el-rate>
					<!-- 开关 -->
					<el-switch v-if="item.type==='switch'" v-model="scope.row[item.prop]" :size="size || btn.size" :active-value='item.values&&item.values[0]'
					 :inactive-value='item.values&&item.values[1]' :disabled="item.isDisabled && item.isDisabled(scope.row)" @change='item.change && item.change(scope.row)'></el-switch>
					<!-- 图像 -->
					<el-image v-if="item.type==='image'" :style="item.imageStyle || 'width:46px;height:46px;border-radius: 50%;margin-top:4px'"
					 :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)" fit="cover"></el-image>
					<!-- 滑块 -->
					<el-slider v-if="item.type==='slider'" v-model="scope.row[item.prop]" :disabled="item.isDisabled && item.isDisabled(scope.row)"
					 :size="size || btn.size" @change='item.change && item.change(scope.row)'></el-slider>
					<template v-if="item.type==='tag'">
						<el-tag style="margin-right: 4px;" size="mini" v-if="scope.row[item.prop] && scope.row[item.prop].length > 0"
						 v-for="t in scope.row[item.prop].split(',')">{{t}}</el-tag>
					</template>
					<!-- 默认 -->
					<span v-if="!item.type" :style="item.itemStyle && item.itemStyle(scope.row)" :size="size || btn.size" :class="item.itemClass && item.item.itemClass(scope.row)">
						{{(item.formatter && item.formatter(scope.row)) || scope.row[item.prop]}}
					</span>
				</template>

			</el-table-column>
			<div slot="empty">
				{{emptyString}}
			</div>
		</el-table>
		<div class="table-bottom">
			<div class="bottom-operate" >
				<!-- <el-checkbox @change="selectAll">全选</el-checkbox> -->
				<slot name="bottomOperate"></slot>
				<el-button class="batch-del" @click="batchDel" v-if="isBatchDel">批量删除</el-button>
			</div>
			<el-pagination v-if="isPagination" background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			 :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :layout="layout" :total="total">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	import {
		Message,
		Confirm
	} from "element-ui"
	export default {
		name:"LxTable",
		props: {
			that: {
				type: Object,
				default: this
			},
			size: {
				type: String,
				default: 'mini'
			},
			// 表格型号：mini,medium,small
			isBorder: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: false
			},
			// 表格数据
			tableData: {
				type: Array,
				default: () => []
			},
			// 表格列配置
			tableCols: {
				type: Array,
				default: () => []
			},
			// 是否显示表格复选框
			isSelection: {
				type: Boolean,
				default: false
			},
			defaultSelections: {
				type: [Array, Object],
				default: () => null
			},
			// 是否显示表格索引
			isIndex: {
				type: Boolean,
				default: false
			},
			indexLabel: {
				type: String,
				default: '序号'
			},
			// 是否显示分页
			isPagination: {
				type: Boolean,
				default: true
			},
			isBatchDel: {
				type: Boolean,
				default: false
			},
			pageSize: {
				type: Number,
				default: 10
			},
			currentPage: {
				type: Number,
				default: 1
			},
			total: {
				type: Number,
				default: 0
			},
			emptyString: {
				type: String,
				default: "暂无数据"
			},
			objectSpanMethod: {
				type: Function,
				default: (row) => {

				}
			},
			showSelectInfo: {
				type: Boolean,
				default: true
			},
			pageSizes: {
				type: Array,
				default: () => [10, 20, 30, 40]
			},
			showSummary:{
				type: Boolean,
				default: false
			},
			layout: {
				type: String,
				default: "total, sizes, prev, pager, next, jumper"
			}

		},
		data() {
			return {
				selectedList: [],
				selectedIdList: []
			}
		},
		watch: {
			tableData() {
				this.changeTableSelected();
			},
			total(val){
				this.total = val;
			}
		},
		computed: {
			selectNum() {
				return this.selectedIdList.length;
			}
		},
		methods: {
			changeTableSelected(){
				let selectedIdList = this.selectedIdList;
				let tableData = this.tableData;
				if (tableData && tableData.length > 0 ) {
					tableData.forEach(el => {
						if (selectedIdList.includes(el.id)) {
							this.$nextTick(() => {
								this.$refs.multipleTable.toggleRowSelection(el, true);
							});
				
						}else{
							this.$nextTick(() => {
								this.$refs.multipleTable.toggleRowSelection(el, false);
							});
						}
					})
				}
			},
			getIndex(index) {
				return (this.currentPage - 1) * this.pageSize + index + 1;
			},
			selectItem(s, r) {
				let id = r.id;
				let selectedList = this.selectedList;
				let selectedIdList = this.selectedIdList;
				if (this.selectedIdList.includes(id)) {
					let i = selectedIdList.indexOf(id);
					selectedIdList.splice(i, 1);
					selectedList.splice(i, 1);
					this.selectedIdList = selectedIdList;
					this.selectedList = selectedList;
				} else {
					this.selectedIdList.push(id);
					this.selectedList.push(r);
				}
				this.$emit('select', selectedList, selectedIdList);
			},
			selectAll(s) {
				let selectedList = this.selectedList || [];
				let selectedIdList = this.selectedIdList || [];
				let tableData = this.tableData;
				if (s.length == 0) {
					tableData.forEach(el => {
						let id = el.id;
						if (this.selectedIdList.includes(id)) {
							let i = selectedIdList.indexOf(id);
							selectedIdList.splice(i, 1);
							selectedList.splice(i, 1);
						}
					})
				} else {
					tableData.forEach(el => {
						let id = el.id;
						if (!this.selectedIdList.includes(id)) {
							this.selectedIdList.push(el.id);
							this.selectedList.push(el);
						}
					})
				}
				this.selectedIdList = selectedIdList;
				this.selectedList = selectedList;
				this.$emit('select', selectedList, selectedIdList);
			},
			clearSelect() {
				this.$refs.multipleTable.clearSelection();
				this.selectedIdList = [];
				this.selectedList = [];
			},
			handleSizeChange(val) {
				this.$emit('sizeChange', val);
			},
			handleCurrentChange(val) {
				this.$emit('currentChange', val);
			},
			batchDel() {
				if (this.selectedIdList.length == 0) {
					this.$message.error("请选择要删除的数据");
				} else {
					this.$confirm('确定要删除选择的' + this.selectedIdList.length + '条数据吗?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(async () => {
						await this.$emit('batchDel', this.selectedIdList.join());
					}).catch(() => {

					});
				}
			},
			getSelectedIdList() {
				return this.selectedIdList;
			},
			getSelectedList() {
				return this.selectedList;
			},
			cancleSelected(id){
				let index = this.selectedIdList.indexOf(id);
				this.selectedIdList.splice(index,1);
				this.selectedList.splice(index,1);
				this.changeTableSelected();
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.table-container {
		width: 100%;
		@include flex-column(flex-start, flex-start);

		.select-info {
			width: 100%;
			background-color: #F4F7FF;
			height: 48px;
			margin-bottom: 24px;
			border-radius: 2px;
			box-sizing: border-box;
			@include flex-row(space-between, center);

			.text-info {
				@include flex-row(flex-start, center);

				i {
					font-size: 20px;
					color: $mainColor;
					margin-left: 24px;
				}

				div {
					font-size: 14px;
					margin-left: 12px;

					span {
						color: $mainColor;
					}
				}
			}

			.clear-btn {
				color: $mainColor;
				margin-right: 24px;
				cursor: pointer;
			}

		}

		.table-bottom {
			width: 100%;
			margin-top: 32px;
			position: relative;
			@include flex-row(center, center);

			.bottom-operate {
				@include flex-row(flex-start, center);
				position: absolute;
				left: 0;
			}
		}

	}

	::v-deep .el-table th,
	.el-table tr {
		background-color: #F5F7FA;
		color: #333333;
		height: 56px;
		line-height: 56px;
		padding: 0;
		font-size: 14px;
	}

	::v-deep .el-table .cell {
		line-height: 28px;
		max-height: 112px;
		// display: flex;
		// flex-wrap: wrap;
		// flex-direction: row;
		// align-content: center;
	}

	::v-deep .el-table th .el-checkbox {}

	::v-deep .el-table td,
	.el-table th {
		color: #666666;
		height: 56px;
		line-height: 56px;
		padding: 0;
		font-size: 14px;
	}

	::v-deep.el-pagination {
		padding: 0;
	}

	::v-deep .el-input--mini .el-input__inner,
	::v-deep .el-pagination__jump,
	::v-deep .el-pagination__total,
	::v-deep .el-input .el-input__inner {
		height: 32px !important;
		line-height: 32px !important;
	}

	::v-deep .el-pagination .btn-next,
	::v-deep .el-pagination .btn-prev,
	::v-deep .el-pager .number,
	::v-deep .el-pager .el-icon {
		min-width: 32px;
		height: 32px !important;
		line-height: 32px !important;
	}

	::v-deep .el-pagination {
		display: flex;
		flex-direction: row;
		justify-content: center;
		height: 32px;
		line-height: 32px;
		font-size: 14px;
		font-weight: normal;
	}

	.bottom-operate .batch-del {
		height: 32px !important;
		line-height: 32px !important;
		padding: 0 12px;
		// margin-left: 32px;
	}

	.el-image {
		display: inline-block;
	}
</style>
